<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户仪表盘</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>欢迎, <span id="customerName"></span></h1>
            <button id="logoutBtn"><i class="fas fa-sign-out-alt"></i> 退出登录</button>
        </header>

        <div class="account-info">
            <h2><i class="fas fa-wallet"></i> 账户信息</h2>
            <p><i class="fas fa-credit-card"></i> 卡号: <span id="cardId"></span></p>
            <p><i class="fas fa-money-bill-wave"></i> 余额: ¥<span id="balance"></span></p>
            <p id="lossStatus"><i class="fas fa-exclamation-triangle"></i> 状态: <span id="isLost">正常</span></p>
        </div>

        <div class="operation-panel">
            <h2><i class="fas fa-exchange-alt"></i> 交易操作</h2>
            <div class="form-group">
                <label for="amount"><i class="fas fa-yen-sign"></i> 金额</label>
                <input type="number" id="amount" min="0.01" step="0.01" placeholder="输入金额">
            </div>
            <div class="form-group" id="targetCardGroup" style="display: none;">
                <label for="targetCard"><i class="fas fa-credit-card"></i> 目标卡号</label>
                <input type="text" id="targetCard" placeholder="输入目标卡号" pattern="\d{16}">
            </div>
            <div class="buttons">
                <button id="depositBtn"><i class="fas fa-hand-holding-usd"></i> 存款</button>
                <button id="withdrawBtn"><i class="fas fa-money-bill-wave"></i> 取款</button>
                <button id="transferBtn"><i class="fas fa-exchange-alt"></i> 转账</button>
                <button id="refreshBtn"><i class="fas fa-sync-alt"></i> 刷新</button>
            </div>
        </div>

        <div class="operation-panel">
            <h2><i class="fas fa-cog"></i> 账户管理</h2>
            <button id="reportLossBtn"><i class="fas fa-exclamation-triangle"></i> 挂失账户</button>
            <button id="showChangePasswordBtn"><i class="fas fa-key"></i> 修改密码</button>

            <div id="changePasswordForm" style="display: none; margin-top: 15px;">
                <div class="form-group">
                    <label for="oldPassword"><i class="fas fa-lock"></i> 旧密码</label>
                    <input type="password" id="oldPassword" placeholder="输入旧密码" pattern="\d{6}">
                </div>
                <div class="form-group">
                    <label for="newPassword"><i class="fas fa-lock"></i> 新密码</label>
                    <input type="password" id="newPassword" placeholder="输入新密码(6位数字)" pattern="\d{6}">
                </div>
                <div class="form-group">
                    <label for="confirmPassword"><i class="fas fa-lock"></i> 确认密码</label>
                    <input type="password" id="confirmPassword" placeholder="再次输入新密码" pattern="\d{6}">
                </div>
                <button id="changePasswordBtn"><i class="fas fa-save"></i> 保存密码</button>
            </div>
        </div>
    </div>
    <script src="/static/js/script.js"></script>
</body>
</html>